<template>
	<yzb-page class="">
		<view class="" style="background-color: #263140;">
			<view class="body">
				<view class="top">
					<view class="space-between">
						<view class="company">
							<text class="name" user-select="true">山西洪城运至科技有限公司</text>
							<text class="require">民营 300-500人 不需要融资</text>
						</view>
						<image class="logo" :src="$mConfig.imageUrl + '/image/shop-logo.png'"></image>
					</view>
				</view>
				<view class="time">
					<view class="require">
						<view class="item">
							<text class="yzb yzb-shijian top-icon"></text>
							<text>上午09:00-下午06:00</text>
						</view>
						<view class="item">
							<text class="yzb yzb-gongzuobao top-icon"></text>
							<text>双休</text>
						</view>
						<view class="item" @tap="openWorkTime">
							<text class="yzb yzb-next icon-next"></text>
						</view>
					</view>
					<view class="require2">
						<view class="item">
							<text class="yzb yzb-gongzuobao top-icon"></text>
							<text>弹性工作</text>
						</view>
					</view>
					<view class="welfare">
						<text class="items">包吃包住</text>
						<text class="items">五险一金</text>
						<text class="items">节日福利</text>
						<text class="items">生日福利</text>
						<text class="items" @tap="openWorkTime">…</text>
					</view>
				</view>
				<!-- 公司地址 -->
				<view class="address">
					<view class="ad-box">
						<text class="title">公司地址</text>
						<view class="more-address">
							<text class="ad">全部地址</text>
							<text class="yzb yzb-next icon-next" @tap="openCompanyAddress"></text>
						</view>
					</view>
					<view class="space-between">
						<view class="column">
							<text class="info">山西省大同市云州区搜的想12号利息 大厦587室</text>
						</view>
						<view class="nav" @click="toMap()">
							<text>导航</text>
						</view>
					</view>
				</view>
				<view class="detail">
					<text class="title">公司介绍</text>
					<view class="desc">
						<sunui-grand
							:content="'我们通常将那些高速发展的创业型公司称之为快公司（Fast Company），他们攻城略地，快速扩张自己的规模，在很短的时间做大做强哈哈哈哈哈哈哈哈哈哈哈哈哈哈'"
							color="#1D82FE" bg="transparent" :clamp="3" expandText="点击展开全文"
							shinkText="收起"></sunui-grand>
					</view>
				</view>
				<!-- 公司相册 -->
				<view class="detail">
					<view class="ad-box">
						<text class="title">公司相册</text>
						<view class="more-address" @tap="openCompanyAlbum">
							<text class="ad">查看全部</text>
							<text class="yzb yzb-next icon-next"></text>
						</view>
					</view>
					<view class="img-box">
						<view :class="['img-li',curImg == 0?'active-li':'']" @tap="switchImg(0)">
							公司照片
						</view>
						<view :class="['img-li',curImg == 1?'active-li':'']" @tap="switchImg(1)">
							工作环境
						</view>
					</view>
					<view class="margin-top-20 company-img-box">
						<uv-album :urls="urls" multipleSize="210rpx" maxCount="100" singleSize="210rpx"
							space="8rpx"></uv-album>
						<!-- <image class="company-img" mode="scaleToFill" :src="$mConfig.imageUrl + '/image/shop-logo.png'"></image>
						<image class="company-img" mode="scaleToFill" :src="$mConfig.imageUrl + '/image/shop-logo.png'"></image>
						<image class="company-img" mode="scaleToFill" :src="$mConfig.imageUrl + '/image/shop-logo.png'"></image> -->
						<!-- <m-swiper :list="ablumList" @clickImg="clickImg"></m-swiper> -->
					</view>
				</view>
				<!-- 工商信息 -->
				<view class="detail" style="padding-bottom: 0;">
					<text class="title">公司介绍</text>
					<view class="item-box">
						<view class="item-li">
							<view class="li-label">
								公司全称
							</view>
							<view class="li-value">
								山西省弘成云彩科技有限公司
							</view>
						</view>
						<view class="item-li">
							<view class="li-label">
								法定代表人
							</view>
							<view class="li-value">
								刘全
							</view>
						</view>
						<view class="item-li">
							<view class="li-label">
								注册资本
							</view>
							<view class="li-value">
								300万人民币
							</view>
						</view>
						<view class="item-li">
							<view class="li-label">
								成立日期
							</view>
							<view class="li-value">
								2016-12-23
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- 该公司其他岗位 -->
			<view class="others" @tap="openAllPosition">
				<!-- <yzb-position v-if="positionList.length > 0" :positions="positionList"
					@click="positionDetail"></yzb-position> -->
				<view class="yzb-position">
					<text>全部招聘1234个职位</text>
				</view>
				<!-- <text v-else class="noPositions">暂无其他岗位</text>
				<view class="load-more-box">
					<uni-load-more v-if="status == '请求中'" status="正在加载..." :showIcon="true"></uni-load-more>
					<uni-load-more v-if="status == '没有更多'" status="没有更多了" :showIcon="false"></uni-load-more>
					<uni-load-more v-if="status == '暂无数据'" status="暂无数据" :showIcon="false"></uni-load-more>
					<uni-load-more v-if="status == '请求失败'" status="加载失败，点我重试" :showIcon="false"
						@click="reLoad"></uni-load-more>
				</view> -->
			</view>
		</view>
		<!-- 工作时间与福利待遇 -->
		<WorkTime ref="WorkTimeRef"></WorkTime>
		<!-- 公司地址 -->
		<CompanyAddress ref="CompanyAddressRef"></CompanyAddress>
		<!-- 公司相册 -->
		<CompanyAlbum ref="CompanyAlbumRef"></CompanyAlbum>
		<!-- 全部招聘职位 -->
		<AllPosition ref="AllPositionRef"></AllPosition>
	</yzb-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex';
	import sunUiGrand from './components/sunui-grand/sunui-grand.vue';
	import yzbPosition from '@/components/yzb/yzb-position.vue';
	import WorkTime from "./components/WorkTime.vue"
	import CompanyAddress from "./components/CompanyAddress.vue"
	import CompanyAlbum from "./components/CompanyAlbum.vue"
	import AllPosition from "./components/AllPosition.vue"
	export default {
		components: {
			sunUiGrand,
			yzbPosition,
			WorkTime,
			CompanyAddress,
			CompanyAlbum,
			AllPosition
		},
		computed: {
			...mapState(['userInfo']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				urls: [
					'https://via.placeholder.com/100x200.png/3c9cff/fff',
					'https://via.placeholder.com/200x200.png/3c9cff/fff',
					'https://via.placeholder.com/300x200.png/3c9cff/fff',
				],
				company: {},
				ablumList: [],
				list: [],
				positionList: [],
				id: '',
				status: '',
				query: {
					limit: 10,
					page: 1,
					companyId: ''
				},
				desc: '',
				curImg: 0
			};
		},
		async onLoad(query) {
			if (query.id > 0) {
				this.id = query.id;
				this.getDetail(query.id);
			} else {
				this.id = this.userInfo.companyId;
				this.getDetail(this.userInfo.companyId);
			}
		},

		onReachBottom() {
			this.query.page++;
			this.getPositionList();
		},

		methods: {
			// 工作时间与福利待遇
			openWorkTime() {
				this.$refs.WorkTimeRef.open()
			},
			// 公司地址
			openCompanyAddress() {
				this.$refs.CompanyAddressRef.open()
			},
			// 公司相册
			openCompanyAlbum() {
				this.$refs.CompanyAlbumRef.open()
			},
			// 全部职位
			openAllPosition() {
				this.$refs.AllPositionRef.open()
			},
			switchImg(cur) {
				this.curImg = cur
			},
			async getDetail(id) {
				let res = await this.$apis.getCompanyDetail({
					id: id
				});
				if (res) {
					this.company = res;
					if (this.company.welfare) {
						this.company.welfare = this.company.welfare.split(',');
					}
					this.list = res.album.split(',');
					for (let i in this.list) {
						let item = {
							pic: ''
						};
						item.pic = this.list[i];
						this.ablumList.push(item);
					}
					this.getPositionList();
				}
			},

			async getPositionList() {
				this.query.companyId = this.id;
				this.status = '请求中';
				let res = await this.$apis.getCompanyPositionList(this.query);
				if (res) {
					let data = res.data;
					for (let i in data) {
						if (data[i].skill) {
							data[i].skill = data[i].skill.split(',');
						}
					}
					this.positionList = this.positionList.concat(data || []);
					this.changeStatus(res);
				}
			},

			// 修改请求状态
			changeStatus(data) {
				if (this.positionList.length === 0) {
					this.status = '暂无数据';
				} else if (this.query.page >= Math.ceil(data.count / this.query.limit)) {
					this.status = '没有更多';
				} else {
					this.status = '请求更多';
				}
			},

			clickImg(index) {
				console.log(index);
				this.previewImg(index);
			},

			// 查看图片
			previewImg(index) {
				console.log('预览==' + index);
				uni.previewImage({
					indicator: 'number',
					loop: true,
					current: this.list[index],
					urls: this.list
				});
			},

			toCompany() {
				this.$mRouter.push({
					route: this.$mRoutesConfig.companyDetail,
					query: {
						id: 1
					}
				});
			},

			unlike() {
				uni.showModal({
					title: '提示',
					content: '设置后将不会推荐该公司职位等信息，确定操作？',
					success: res => {
						if (res.confirm) {
							let param = {
								type: 1,
								companyId: this.company.id
							};
							this.$apis.updateShield(param).then(() => {
								uni.showToast({
									title: '操作成功'
								});
							});
						}
					}
				});
			},

			toMap() {
				console.log('地图');
				// let latitude=this.company.latitude;
				// let longitude=this.company.longitude;
				uni.openLocation({
					latitude: parseFloat(this.company.latitude),
					longitude: parseFloat(this.company.longitude),
					success: function() {
						console.log('success');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.space-between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.center-align {
		display: flex;
		align-items: center;
	}

	.body {
		padding: 20upx 20upx 0 20upx;
		box-sizing: border-box;
		background-color: #263140;
	}

	.unlike {
		border-top: 1rpx solid #ebeef5;
		padding: 20upx 0;

		.note {
			color: $uni-text-color-grey;
		}

		.btn-unlike {
			border: 1upx solid $uni-color-warning;
			border-radius: 10upx;
			padding: 0upx 10upx;

			.yzb-buganxingqu {
				margin-right: 5upx;
				color: $uni-color-warning;
			}

			.txt {
				color: $uni-color-warning;
			}
		}
	}

	.top {
		padding: 30upx 0;

		.company {
			display: flex;
			flex-direction: column;
		}

		.name {
			font-size: $font-size-40;
			font-weight: bold;
			color: #fff;
		}

		.logo {
			width: 150upx;
			height: 150upx;
			border: 1upx solid $border-color-base;
			border-radius: 10upx;
		}

		.require {
			font-size: $uni-font-size-base;
			margin-top: 15upx;
			color: #A8BDD4;
		}
	}

	.time {
		display: flex;
		flex-direction: column;
		padding-bottom: 30upx;
		padding-top: 20upx;

		.title {
			font-size: $uni-font-size-lg;
			font-weight: bold;
			padding: 30upx 0 20upx 0;
		}

		.require {
			display: flex;
			flex-direction: row;
			margin-top: 15upx;
			margin-left: 75rpx;
			color: #A8BDD4;

			.item {
				margin-right: 30upx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.item:nth-child(3) {
				margin-left: auto;
				margin-right: 0;
			}

			.yzb {
				font-weight: bold;
			}

			.top-icon {
				font-size: $font-lg;
				margin-right: 10upx;
				color: #A8BDD4;
			}
		}

		.require2 {
			display: flex;
			flex-direction: row;
			margin-top: 47upx;
			margin-left: 75rpx;
			color: #A8BDD4;

			.item {
				margin-right: 30upx;
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.item:nth-child(3) {
				margin-left: auto;
				margin-right: 0;
			}

			.yzb {
				font-weight: bold;
			}

			.top-icon {
				font-size: $font-lg;
				margin-right: 10upx;
				color: #A8BDD4;
			}
		}

		.welfare {
			display: flex;
			flex-direction: row;
			margin-top: 27upx;
			flex-wrap: wrap;
			margin-left: 75rpx;

			.items {
				font-size: $uni-font-size-base;
				padding: 0upx 20upx;
				// background-color: $border-color-base;
				border-radius: 5upx;
				color: #A8BDD4;
			}
		}
	}

	.address {
		display: flex;
		flex-direction: column;
		padding-bottom: 30upx;

		.ad-box {
			display: flex;
			justify-content: space-between;

			.title {
				font-size: $uni-font-size-lg;
				font-weight: bold;
				padding: 30upx 0 20upx 0;
				color: #fff;
			}

			.more-address {
				display: flex;
				align-items: center;

				.ad {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.yzb {
					margin-left: 15rpx;
					color: #fff;
					font-weight: bold;
				}
			}
		}


		.info {
			padding: 10upx;
			line-height: 1.5;
			font-weight: 500;
			font-size: 26rpx;
			color: #A8BDD4;
		}

		.nav {
			width: 95rpx;
			height: 50rpx;
			background: #3A92FF;
			border-radius: 10rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 50rpx;
			text-align: center;
		}
	}

	.detail {
		display: flex;
		flex-direction: column;
		padding-bottom: 30upx;

		.img-box {
			display: flex;

			.img-li {
				width: 148rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: #3A92FF;
				border-radius: 10rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				margin-right: 16rpx;
			}

			.active-li {
				background: #9FCAFF;
			}
		}

		.company-img-box {
			display: flex;
			flex-wrap: wrap;

			.company-img {
				flex-shrink: 0;
				width: 210rpx;
				height: 142rpx;
				margin-right: 6rpx;
			}

			.company-img:last-child {
				margin-right: 0;
			}
		}

		.ad-box {
			display: flex;
			justify-content: space-between;

			.title {
				font-size: $uni-font-size-lg;
				font-weight: bold;
				padding: 30upx 0 20upx 0;
				color: #fff;
			}

			.more-address {
				display: flex;
				align-items: center;

				.ad {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.yzb {
					margin-left: 15rpx;
					color: #fff;
					font-weight: bold;
				}
			}
		}

		.item-box {
			margin-top: 40rpx;

			.item-li {
				margin-bottom: 40rpx;
				display: flex;
				font-weight: 500;
				font-size: 28rpx;
				color: #A8BDD4;
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-shrink: 0;

				.li-label {
					width: 176rpx;
				}

				.li-value {
					margin-left: 90rpx;
					flex: 1;
				}
			}
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			padding: 30upx 0 0 0;
			color: #FFFFFF;
		}

		.desc {
			line-height: 1.8;
			color: #A8BDD4;
			font-weight: 500;
			font-size: 28rpx;
		}

		.skill {
			margin-top: 25upx;

			text {
				font-size: $uni-font-size-base;
				padding: 10upx 20upx;
				margin-right: 15upx;
				background-color: $border-color-base;
				border-radius: 5upx;
				color: $font-color-666;
			}
		}
	}

	.others {
		display: flex;
		justify-content: center;
		text-align: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.5);
		width: 100%;
		height: 134rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		// margin: 0 -20rpx -20rpx -20rpx;

		.yzb-position {
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
		}
	}
</style>